<template>
    <view v-if="projectObj.name.length>0">
        <view class="infoContainer">
            <view class="title">
                基本信息
            </view>
            <view class="item">
                <view class="left">
                    项目名称
                </view>
                <view class="right">
                    {{projectObj.name}}
                </view>
            </view>
            <view class="item">
                <view class="left">
                    开盘时间
                </view>
                <view class="right">
                    {{projectObj.estimatedOpeningTime||'待定'}}
                </view>
            </view>
            <view class="item">
                <view class="left">
                    均价
                </view>
                <view class="right">
                    {{projectObj.averagePrice}}
                </view>
            </view>
            <view class="item">
                <view class="left">
                    主力户型
                </view>
                <view class="right">
                    {{projectObj.mainHouseType}}
                </view>
            </view>

            <view class="item">
                <view class="left">
                    建筑面积
                </view>
                <view class="right">
                    {{projectObj. constructionArea}}
                </view>
            </view>
            <view class="item">
                <view class="left">
                    装修情况
                </view>
                <view class="right">
                    {{projectObj.renovation=='roughcast'?'毛坯':'精装修'}}
                </view>
            </view>
            <view class="item">
                <view class="left">
                    产权年限
                </view>
                <view class="right">
                    {{projectObj.rightsYears}}
                </view>
            </view>
            <view class="item">
                <view class="left">
                    楼盘地址
                </view>
                <view class="right">
                    {{projectObj.address}}
                </view>
            </view>
            <view class="item">
                <view class="left">
                    售楼部导航地址
                </view>
                <view class="right">
                    {{projectObj.salesDepartmentAddress?projectObj.salesDepartmentAddress:projectObj.address}}
                </view>
            </view>

            <view class="item" @click="gotoPhone">
                <view class="left">
                    咨询电话
                </view>
                <view class="rightIcon">
                    {{projectObj.phone}}
                    <!-- <image class="icon" src="../static/image/article_details_di_icon_tel.png" mode=""></image> -->
                </view>
            </view>
            <view class="item">
                <view class="left">
                    项目标签
                </view>
                <view class="right">
                    {{projectObj.tags}}
                </view>
            </view>
        </view>
        <view class="infoContainer">
            <view class="title" style="margin-bottom: 32rpx;">
                其他信息
            </view>
            <rich-text :nodes="projectObj.otherInfo"></rich-text>
        </view>

        <view class="" style="height: 200rpx;">

        </view>

        <share-button :backgroundBtn="'#5E9FFD'"
			@onShare="onShare"
        ></share-button>
<!--        <view class="bottomContainer">
            <button style="border: none;" plain="true" type="default" open-type="share">
                <view class="container">
                    <image class="icon" src="../../static/image/icon_share.png" mode=""></image>
                    分享
                </view>
            </button>
        </view> -->
    </view>
</template>

<script>
    const api = require("@/static/js/api.js")
    const utils = require("@/static/js/utils.js")
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    let that = null


    export default {
        data() {
            return {
                projectObj: {
                    name: '',
                }
            };
        },

        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
                isSeller: state => state.userInfo.isSeller,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },
        components: {

        },
        onLoad(options) {
            that = this;
            that.getProjectInfo();
			that.shareTitleMixins = "楼盘信息"
        },
        onShow() {

        },
        methods: {
            ...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId', "setOrigin"]),

            getProjectInfo() {
                let that = this
                api.getProjectInfo({
                    param: {

                    }
                }).then(res => {
                    console.log(res)
                    if (res.success) {
                        that.projectObj = res.data
                    }
                })
            },
            gotoPhone() {
                uni.makePhoneCall({
                    // 手机号
                    phoneNumber: that.projectObj.phone,
                    // 成功回调
                    success: (res) => {
                        console.log('调用成功!')
                    },
                    // 失败回调
                    fail: (res) => {
                        console.log('调用失败!')
                    }
                });
            },
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #F3F3F3;
    }

    .infoContainer {
        width: 714rpx;
        // height: 562rpx;
        background: #FFFFFF;
        box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
        border-radius: 20rpx;
        padding: 32rpx;
        margin-left: 18rpx;
        margin-top: 24rpx;

    .title {
            font-size: 30rpx;
            font-weight: 600;
            color: #1F1F1F;
            margin-bottom: 10rpx;
        }

        .item {
            display: flex;
            margin-top: 24rpx;

            .left {
                margin-right: 30rpx;
                width: 131rpx;
                font-size: 28rpx;
                line-height: 40rpx;
                color: #999999;
            }

            .right {
                font-size: 28rpx;
                color: #333333;
                width: 430rpx;
                line-height: 40rpx;
        	   }

            .rightIcon {
                font-size: 28rpx;
                color: #333333;
                width: 430rpx;
                line-height: 40rpx;
                display: flex;
                align-items: center;

                .icon {
                    margin-left: 24rpx;
                    width: 35rpx;
                    height: 35rpx;
                }
            }
        }
    }

    .bottomContainer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 750rpx;
        height: 122rpx;
        background: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: #F3F3F3 1px solid;

        .container {
            width: 500rpx;
            height: 74rpx;
            background: #5E9FFD;
            border-radius: 37rpx;
            font-size: 28rpx;
            color: #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;

            .icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 15rpx;
            }
        }
    }
</style>
